<template>
  <div class="main-container">
    <div class="top">
      <div class="item-bg left" style="width: 60%; height: 100%">
        <span class="title" style="padding: 10px 15px">
          科目评阅情况
          <span style="flex: 1"></span>
        </span>
        <table class="topClose" width="100%">
          <thead>
            <tr>
              <th colspan="2"
                >科目名称:({{ curSubject.kmdm }})
                <span style="font-weight: 600; font-size: 16px">{{ curSubject.kmmc }}</span>
              </th>
              <th colspan="2">所属学院:{{ curSubject.xydm }}({{ curSubject.xymc }})</th>
              <th colspan="2">科目总分:{{ curSubject.kmzfs }}分</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>最高分</td>
              <td>最低分</td>
              <td>平均分</td>
              <td>
                标准分差
                <a-tooltip :key="'#fadfvf'" title="标准分差" :color="'#fadfvf'">
                  <Icon icon="eva:question-mark-circle-fill" />
                </a-tooltip>
              </td>
              <td>
                区分度
                <a-tooltip :key="'#fadfvf'" title="区分度" :color="'#fadfvf'">
                  <Icon icon="eva:question-mark-circle-fill" />
                </a-tooltip>
              </td>
              <td>中位数</td>
            </tr>
            <tr>
              <td>{{ readAppraiseData.maxValue || '0' }}</td>
              <td>{{ readAppraiseData.minValue || '0' }}</td>
              <td>{{ readAppraiseData.average || '0' }}</td>
              <td>{{ readAppraiseData.standardDeviation || '0' }}</td>
              <td>{{ readAppraiseData.discrimination || '0' }}</td>
              <td>{{ readAppraiseData.median || '0' }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="item-bg right" style="flex: 1; height: 100%">
        <span class="title">
          <span style="flex: 1"> {{ lsxm }}评阅分析</span>
          <span
            @click="$router.back()"
            style="
              cursor: pointer;
              margin-left: 15px;
              font-size: 14px;
              font-weight: 500;
              color: #999;
            "
          >
            返回上一页
          </span>
        </span>
        <div style="width: 100%" class="infoboxliest">
          <div class="box">
            <div>评阅人数</div>
            <Icon color="#A1CAF8" icon="ic:baseline-people" />
            <div class="numben">{{ workData?.reviewPeopleNum || '0' }}</div>
          </div>
          <div class="box">
            <div>试题总数</div>
            <Icon color="#2A82E4" icon="mdi:file-document-box-multiple" />
            <div class="numben">{{ workData?.paperNum || '0' }}</div>
          </div>
          <div class="box">
            <div>已评阅</div>
            <Icon color="#00BAAD" icon="file-icons:a" />
            <div class="numben">{{ workData?.hadReviewNum || '0' }}</div>
          </div>
          <div class="box">
            <div>待评阅</div>
            <Icon color="#FF8D1A" icon="zondicons:time" />
            <div class="numben">{{ workData?.toReviewNum || '0' }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <info-list />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import infoList from './info-list.vue'
import { Icon } from '/@/components/Icon'
import { useRoute } from 'vue-router'
import { findSuGetewDetail, reviewWorkDetail } from '/@/api/examinationAudit'

const route = useRoute()
const lsxm = ref(route.query.name)

const curSubject = <any>ref({})

const readAppraiseData = <any>ref({})
const workData = <any>ref({})

// 科目评阅详情
const getInfoFun = async () => {
  let { code, data } = await findSuGetewDetail({
    kmYear: route.query.kmYear,
    noticeYear: route.query.kmYear,
    kmdm: route.query.kmdm,
    Kmpyzt: route.query.Kmpyzt,
  })
  if (code == 200) {
    curSubject.value = data
    readAppraiseData.value = data.relationAttribute || {}
  }
}

// 评阅工作数据统计
const getReviewWorkDetail = async () => {
  let { code, data } = await reviewWorkDetail({
    kmYear: route.query.kmYear,
    kmdm: route.query.kmdm,
    Kmpyzt: route.query.Kmpyzt,
  })
  if (code == 200) {
    workData.value = data
  }
}

onMounted(async () => {
  await getInfoFun()
  await getReviewWorkDetail()
})
</script>
<style lang="less" scoped>
.main-container {
  display: flex;
  flex-direction: column;
  height: @c_height;
  justify-content: space-between;

  .item-bg {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: 0px 0px 6px 1px rgba(128, 144, 219, 0.16);
    border-radius: 6px 6px 6px 6px;
    position: relative;

    .title {
      width: 100%;
      padding: 10px 16px;
      font-weight: bold;
      color: #3f4355;
      font-size: 16px;
      font-family: PingFang SC-Bold, PingFang SC;
      border-bottom: 2px solid #f0f1f8;
      display: flex;
      align-items: center;

      ::v-deep(.ant-tabs-top > .ant-tabs-nav) {
        margin: 0;
      }
    }

    .infoboxliest {
      display: flex;
      align-items: center;
      justify-content: space-around;
      text-align: center;
      .box {
        div {
          padding: 20px 0;
        }

        .anticon {
          font-size: 25px !important;
        }

        .numben {
          font-size: 20px;
          color: #666;
        }
      }
    }
  }
}

.top {
  width: 100%;
  height: 205px;
  display: flex;

  .left {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 16px;

    .topClose {
      margin: 0;
      text-align: center;
      thead tr th {
        text-align: center;
        border: 1px solid #e8e8e8;
        line-height: 50px;
        background-color: #eff6ff;
        width: 33%;
        height: 50px;
        white-space: nowrap;
      }

      tbody tr td {
        text-align: center;
        border: 1px solid #e8e8e8;
        line-height: 50px;
        width: 16.6%;
      }
    }
  }
}

.bottom {
  position: relative;
  height: calc(100% - 230px);
  width: 100%;
}

.notice {
  width: 100%;
  height: 50px;
  background-color: #fff;
  padding: 15px 20px 0;
  border-radius: 10px;
  .title {
    font-weight: 700;
    margin-right: 10px;
    color: #2c7fdd;
  }
  .text {
    display: inline-block;
    margin-right: 100px;
    @keyframes slidein {
      from {
        transform: translateX(1300%);
      }

      to {
        transform: translateX(0%);
      }
    }
    animation: slidein 20s 5s 1 linear;
  }
}
</style>
